<template>
	<view>
		<ttBar leftIcon="icon-back" title="选择店铺">
			<template v-slot:rightCnt>
				<text v-if="userInfo.admin==1" class="inText" @tap="addShop">添加店铺</text>
			</template>
		</ttBar>
		<view class="shopList mainCnt">
			<block v-if="shopList.length>0">
				<view v-for="(item,index) in shopList" :key="index" class="shopRow" @tap="tapShop" :data-id="index">
					<image :src="item.logo?item.logo:'../../static/shopLogo.png'" mode=""></image>
					<text class="shopName">{{item.name}}</text>
					<!-- <text class="shopStatus" :class="statusArr[item.status].style">{{statusArr[item.status].text}}</text> -->
				</view>
			</block>
			<block v-else>
				<emptyBox :type="'data'"></emptyBox>
			</block>
		</view>
		<poup ref="dialog"></poup>
		<updateModal ref="upModal"></updateModal>
		<downLoding></downLoding>
	</view>
</template>

<script>
	import emptyBox from "@/components/emptyBox/emptyBox.vue";
	import ttBar from "@/components/ttBar/ttBar.vue";
	import poup from "@/components/poup/poup.vue";
	import API from "@/common/api.js";
	import downLoding from "@/components/downLoding/downLoding.vue";
	import updateModal from "@/components/updateModal/updateModal.vue";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar,
			emptyBox,
			poup,
			downLoding,
			updateModal
		},
		computed:{
			...mapState({
				shopList:state=>state.shop.shopList,
				userInfo:state=>state.user.userInfo,
				settledInfo:state=>state.settled.settledProgress,
				selectShop:state=>state.shop.selectShop
			})
		},
		data() {
			return {
				statusArr: [{
					text: '待审核',
					style: 'yellow'
				},{
					text: '已通过',
					style: 'green'
				},{
					text: '未通过',
					style: 'red'
				}],
			};
		},
		methods: {
			tapShop(e){
				let _this=this;
				let _index=e.currentTarget.dataset.id
				this.$store.commit("select",this.shopList[_index])
				setTimeout(()=>{
					uni.switchTab({
						url:'../index/index'
					})
				},500)
			},
			getData(){
				this.$store.dispatch("getShopListByUid",this.userInfo.userId)
			},
			// 跳转到添加店铺页
			addShop(){
				if(this.settledInfo.type==1){
					this.toPage({
						url:'addShop'
					})
				}else{
					if(this.shopList.length>0){
						// this.$refs.dialog.init({
						// 	title:'提示',
						// 	cntText:'个人用户最多只能拥有一个店铺。',
						// 	cancle:''
						// })
						// this.$refs.dialog.show();
						this.toPage({
							url:'addShop'
						})
						// this.toPage({
						// 	url:'personAddshop'
						// })
					}else{
						this.toPage({
							url:'addShop'
						})
						// this.toPage({
						// 	url:'personAddshop'
						// })
					}
				}
			}
		},
		onLoad(cfm) {
			
			this.getData();
			
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData();
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.inText {
		font-size: 28rpx;
		color: #6b6f72;
	}

	.shopList {
		margin-top: 24upx;
		display: flex;
		flex-direction: column;

		.shopRow {
			border-radius: 20upx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			display: flex;
			align-items: center;
			padding: 30upx 20upx 30upx 35upx;
			margin-top: 15upx;

			image {
				width: 108upx;
				height: 108upx;
				flex-shrink: 0;
				margin-right: 25upx;
				border-radius: 50%;
			}

			.shopName {
				font-size: 30rpx;
				color: #3b434d;
				flex-grow: 1;
			}
			.shopStatus{
				font-size: 28upx;
				flex-shrink: 0;
			}
			.green{
				color:#32c555 ;
			}
			.yellow{
				color: #f68f21;
			}
			.red{
				color: #ed3636;
			}
		}
	}
</style>
